<template>
  <AppLayout>
    <div :class="styles['settings']">
      <div :class="styles['page-header']">
        <h1 :class="styles['page-title']">系统设置</h1>
      </div>

      <div :class="styles['settings-content']">
        <div :class="styles['settings-section']">
          <h2 :class="styles['section-title']">基本设置</h2>
          <div :class="styles['setting-item']">
            <label :class="styles['setting-label']">系统名称</label>
            <input v-model="settings.systemName" type="text" :class="styles['setting-input']">
          </div>
          <div :class="styles['setting-item']">
            <label :class="styles['setting-label']">系统描述</label>
            <textarea v-model="settings.systemDescription" :class="styles['setting-textarea']"></textarea>
          </div>
          <div :class="styles['setting-item']">
            <label :class="styles['setting-label']">管理员邮箱</label>
            <input v-model="settings.adminEmail" type="email" :class="styles['setting-input']">
          </div>
        </div>

        <div :class="styles['settings-section']">
          <h2 :class="styles['section-title']">考试设置</h2>
          <div :class="styles['setting-item']">
            <label :class="styles['setting-label']">默认考试时长（分钟）</label>
            <input v-model="settings.defaultExamDuration" type="number" :class="styles['setting-input']">
          </div>
          <div :class="styles['setting-item']">
            <label :class="styles['setting-label']">允许重考</label>
            <select v-model="settings.allowRetake" :class="styles['setting-select']">
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
          </div>
          <div :class="styles['setting-item']">
            <label :class="styles['setting-label']">最大重考次数</label>
            <input v-model="settings.maxRetakeCount" type="number" :class="styles['setting-input']">
          </div>
        </div>

        <div :class="styles['settings-section']">
          <h2 :class="styles['section-title']">安全设置</h2>
          <div :class="styles['setting-item']">
            <label :class="styles['setting-label']">密码最小长度</label>
            <input v-model="settings.minPasswordLength" type="number" :class="styles['setting-input']">
          </div>
          <div :class="styles['setting-item']">
            <label :class="styles['setting-label']">会话超时时间（分钟）</label>
            <input v-model="settings.sessionTimeout" type="number" :class="styles['setting-input']">
          </div>
          <div :class="styles['setting-item']">
            <label :class="styles['setting-label']">启用登录日志</label>
            <select v-model="settings.enableLoginLog" :class="styles['setting-select']">
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
          </div>
        </div>

        <div :class="styles['settings-section']">
          <h2 :class="styles['section-title']">通知设置</h2>
          <div :class="styles['setting-item']">
            <label :class="styles['setting-label']">邮件通知</label>
            <select v-model="settings.emailNotification" :class="styles['setting-select']">
              <option value="true">启用</option>
              <option value="false">禁用</option>
            </select>
          </div>
          <div :class="styles['setting-item']">
            <label :class="styles['setting-label']">系统通知</label>
            <select v-model="settings.systemNotification" :class="styles['setting-select']">
              <option value="true">启用</option>
              <option value="false">禁用</option>
            </select>
          </div>
        </div>

        <div :class="styles['settings-actions']">
          <button @click="saveSettings" :class="styles['save-btn']">保存设置</button>
          <button @click="resetSettings" :class="styles['reset-btn']">重置</button>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AppLayout from '@/components/layout/AppLayout.vue'
import styles from '@/styles/admin/settings.module.css'

const settings = ref({
  systemName: 'Exam AI智能考试系统',
  systemDescription: '基于人工智能的智能考试系统',
  adminEmail: 'admin@examai.com',
  defaultExamDuration: 120,
  allowRetake: 'true',
  maxRetakeCount: 3,
  minPasswordLength: 8,
  sessionTimeout: 30,
  enableLoginLog: 'true',
  emailNotification: 'true',
  systemNotification: 'true'
})

const saveSettings = async () => {
  try {
    // 这里应该调用API保存设置
    console.log('保存设置:', settings.value)
    alert('设置保存成功！')
  } catch (error) {
    console.error('保存设置失败:', error)
    alert('保存设置失败！')
  }
}

const resetSettings = () => {
  if (confirm('确定要重置所有设置吗？')) {
    // 重置为默认值
    settings.value = {
      systemName: 'Exam AI智能考试系统',
      systemDescription: '基于人工智能的智能考试系统',
      adminEmail: 'admin@examai.com',
      defaultExamDuration: 120,
      allowRetake: 'true',
      maxRetakeCount: 3,
      minPasswordLength: 8,
      sessionTimeout: 30,
      enableLoginLog: 'true',
      emailNotification: 'true',
      systemNotification: 'true'
    }
  }
}

onMounted(async () => {
  // 这里应该从API加载设置
  console.log('加载系统设置')
})
</script>